import React, { PureComponent } from 'react'
import { connect} from 'react-redux'
import {LoginWrapper,LoginBox,Input,Button} from './style'
import {actionCreators} from './store'
import { Redirect } from 'react-router-dom'
class Login extends PureComponent {
    render() {
        const {loginStatus} = this.props 
        if(!loginStatus){
            return ( 
                <LoginWrapper>
                   <LoginBox>
                        <Input placeholder="账号" innerRef={(input) => {this.account = input}} />
                        <Input placeholder="密码" innerRef={(input) => {this.password = input}} />
                        <Button onClick={()=>this.props.login(this.account,this.password)}>登录</Button>
                    </LoginBox> 
                </LoginWrapper>
            )
        }else{
            return <Redirect to="/" />
        }
        
    }
}

const mapState =(state)=> ({
    loginStatus:state.getIn(['login','login'])
})

const mapDispatch = (dispatch) => ({
    login(accountElem,passwordElem){
        // console.log(accountElem.value,passwordElem.value)
        dispatch(actionCreators.login(accountElem.value,passwordElem.value))
    }
})

export default  connect(mapState,mapDispatch)(Login)